import { ViewStyle, StyleSheet, TextStyle, ImageStyle } from 'react-native'
import { translateSize, themeColors, definedColors } from 'styles'

interface CancelResultStyle {
	container: ViewStyle
	icon: ImageStyle
	content: TextStyle
}

const cancelResultStyle = StyleSheet.create<CancelResultStyle>({
	container: {
		alignItems: 'center',
		marginTop: translateSize(300),
	},
	icon: {
		height: translateSize(140),
		width: translateSize(140),
	},
	content: {
		marginTop: translateSize(60),
		fontSize: translateSize(32),
		fontWeight: 'bold',
		color: themeColors.title,
	},
})

interface CancelStyle {
	container: ViewStyle
	logo: ImageStyle
	account: TextStyle
	input: TextStyle
	login: TextStyle
}

const cancelStyle = StyleSheet.create<CancelStyle>({
	container: {
		alignItems: 'center',
		paddingHorizontal: translateSize(110),
	},
	logo: {
		width: translateSize(120),
		marginTop: translateSize(117),
	},
	account: {
		width: '100%',
		// height: translateSize(80),
		textAlign: 'center',
		fontSize: translateSize(28),
		marginTop: translateSize(55),
		// marginBottom: translateSize(33),
		// borderColor: definedColors.grayda,
		// borderWidth: 1,
		// borderRadius: translateSize(10),
	},
	input: {
		width: '100%',
		height: translateSize(80),
		textAlign: 'center',
		fontSize: translateSize(28),
		marginTop: translateSize(30),
		marginBottom: translateSize(33),
		borderColor: definedColors.grayda,
		borderWidth: 1,
		borderRadius: translateSize(10),
	},
	login: {
		fontSize: translateSize(28),
		color: definedColors.white,
	},
})

interface CancelOrderDetailStyle {
	container: ViewStyle
	contentContainer: ViewStyle
	inputContainer: ViewStyle
	inputIcon: ImageStyle
	input: TextStyle
	traderDetail: ViewStyle
	confirmBtn: ViewStyle
	confirmTitle: TextStyle
}

const cancelOrderDetailStyle = StyleSheet.create<CancelOrderDetailStyle>({
	container: {
		height: '100%',
		backgroundColor: themeColors.pageBg,
	},
	contentContainer: {
		padding: translateSize(32),
		backgroundColor: definedColors.white,
	},
	inputContainer: {
		alignItems: 'center',
		height: translateSize(88),
		marginVertical: translateSize(40),
		backgroundColor: themeColors.pageBg,
		borderRadius: translateSize(45),
		borderWidth: 1,
		borderColor: themeColors.divider,
	},
	inputIcon: {
		marginLeft: translateSize(32),
		marginRight: translateSize(8),
	},
	input: {
		width: '70%',
		height: '100%',
		color: definedColors.gray92,
		fontSize: translateSize(28),
	},
	traderDetail: {
		paddingLeft: translateSize(0),
		marginRight: translateSize(32),
	},
	confirmBtn: {
		marginTop: translateSize(50),
		marginHorizontal: translateSize(32),
	},
	confirmTitle: {
		fontSize: translateSize(28),
		color: definedColors.white,
	},
})

export { cancelStyle, cancelResultStyle, cancelOrderDetailStyle }
